<script setup lang="ts">
import UserAPI from '@/api/system/user';
import { useList } from '@/hooks/useList';
import UserDialog from './components/user-dialog.vue';

import { statusList } from './constant';
import { useSearchTableConfig } from './hooks/use-search-table-config';

defineOptions({ name: 'TemplateApp' });

const {
  params,
  tableTotal,
  tableData,
  tableLoading,
  handleSearch,
  handleReset,
  handleSizeChange,
  handleCurrentChange,
} = useList<any[], any>({
  request: {
    api: UserAPI.getPage,
    params: {
      customerName: '',
      contactPhone: '',
      contactName: '',
      createdStartTime: '',
      createdEndTime: '',
      followerName: '',
      status: '',
      limit: 10,
      page: 1,
    },
  },
});

const selections = ref<any[]>([]);
const handleSelectionChange = (vals: any) => {
  selections.value = vals;
};

const handleDelete = async () => {
  if (selections.value.length === 0) return ElMessage.warning('请选择数据');
  await ElMessageBox.confirm('是否删除该条数据？', '删除', { confirmButtonText: '删除', type: 'warning' });
  ElMessage.success('操作成功');
  handleSearch();
};
const handleChangeStatus = async () => {
  if (selections.value.length === 0) return ElMessage.warning('请选择数据');
  await ElMessageBox.confirm('是否 启用/禁用 选择的用户？', '启用/禁用', { type: 'warning' });
  ElMessage.success('操作成功');
  handleSearch();
};

const dialogData = reactive({
  visible: false,
  data: {} as any,
});
const handleEdit = (row = {}) => {
  dialogData.data = row;
  dialogData.visible = true;
};

const { searchAreaConfig, columns } = useSearchTableConfig({ handleSearch, handleEdit });

const appPageConfig = reactive({
  isFlow: false,
  showFHeader: true,
  isFullscreen: false,
  isFixed: true,
});

onMounted(handleSearch);
</script>

<template>
  <section>
    <AppPage v-model:config="appPageConfig">
      <template #fheader>
        <SearchArea
          v-model="params"
          :config="searchAreaConfig"
          :showFilter="false"
          @handleReset="handleReset"
          @handleSearch="handleSearch"
        />
      </template>
      <template #header>
        <el-row class="w-full" justify="space-between">
          <ConditionSelect
            v-model="params.status"
            clearable
            title="状态："
            boldTitle
            :options="statusList"
            @change="handleSearch()"
          />
          <section>
            <el-button type="success" icon="plus" @click="handleEdit">新增</el-button>
            <el-button type="danger" icon="delete" @click="handleDelete">删除</el-button>
            <el-button type="primary" icon="setting" @click="handleChangeStatus">启用/禁用</el-button>

            <ProTableColumnSwitch v-model="columns" />
            <ProTableColumnConfig v-model="columns" />

            <el-tooltip content="刷新表格数据" placement="top">
              <el-button circle icon="refresh-right" @click="handleSearch()" />
            </el-tooltip>

            <el-tooltip content="隐藏 顶部搜索表单" placement="top">
              <el-button
                circle
                icon="search"
                :type="appPageConfig.showFHeader ? 'default' : 'primary'"
                @click="appPageConfig.showFHeader = !appPageConfig.showFHeader"
              />
            </el-tooltip>

            <el-tooltip content="区域全屏，该设置与 流式布局 互斥" placement="top">
              <el-button
                circle
                icon="fullScreen"
                :type="appPageConfig.isFullscreen ? 'primary' : 'default'"
                @click="appPageConfig.isFullscreen = !appPageConfig.isFullscreen"
              />
            </el-tooltip>

            <el-tooltip content="流式布局，开启后 顶部搜索区 和 底部页码区 将跟随页面滚动" placement="top">
              <el-button
                :type="appPageConfig.isFlow ? 'primary' : 'default'"
                circle
                @click="appPageConfig.isFlow = !appPageConfig.isFlow"
              >
                <SvgIcon icon-class="flow" />
              </el-button>
            </el-tooltip>

            <el-tooltip content="固定表格高度，该设置与 流式布局 互斥" placement="top">
              <el-button
                :type="appPageConfig.isFixed ? 'primary' : 'default'"
                circle
                @click="appPageConfig.isFixed = !appPageConfig.isFixed"
              >
                <SvgIcon icon-class="fixed" />
              </el-button>
            </el-tooltip>
          </section>
        </el-row>
      </template>
      <template #main="{ height }">
        <ProTable
          :data="tableData"
          :columns="columns"
          :border="true"
          :height="height"
          :loading="tableLoading"
          @selection-change="handleSelectionChange"
        />
      </template>
      <template #ffooter>
        <Pagination
          v-model:limit="params.limit"
          v-model:page="params.page"
          :total="tableTotal"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </template>
    </AppPage>
    <UserDialog v-model="dialogData.visible" :data="dialogData.data" />
  </section>
</template>
